<template>
	<gui-page>
		<template v-slot:gBody>
			<view style="padding:50rpx;">
				<view style="height:150rpx;"></view>
				<view class="gui-flex gui-column gui-justify-content-start">
					<view class="gui-h2 gui-bold gui-primary-color">
						欢迎登录
					</view>
					<!-- <view class="gui-text gui-color-gray">
						请登录以获得独家XX服务。
					</view> -->
				</view>
				<view style="margin-top:80rpx;">
					<form @submit="submit">
						<view>
							<text class="gui-text-small gui-color-gray">账号</text>
						</view>
						<view class="gui-border-b">
							<input type="text" class="gui-form-input" name="mobile" placeholder="登录账号" v-model="mobile" />
						</view>
						<view class="gui-margin-top">
							<text class="gui-text-small gui-color-gray">密码</text>
						</view>
						<view class="gui-border-b">
							<input type="password" class="gui-form-input" name="password" placeholder="密码" v-model="password"/>
						</view>
						<view class="gui-margin-top gui-flex gui-rows gui-space-between" hover-class="gui-tap">
							<!-- <text class="gui-text gui-color-gray gui-block" @tap="forgetPwd">忘记密码</text> -->
							<!-- <text class="gui-text gui-color-gray gui-block gui-text-right" @tap="loginbymsg">短信登录</text> -->
						</view>

						<!-- <view class=" gui-dark-bg-level-3 gui-padding gui-margin-top">
							<gui-radio @change="radioChange">
								<view class="gui-flex gui-row">
									<text class="gui-text gui-primary-text">我同意并遵守</text>
									<text class="gui-text gui-primary-color" @tap.stop.prevent="openXYPage">《注册协议》</text>
								</view>
							</gui-radio>
						</view> -->


						<view style="margin-top:38rpx;">
							<button type="default" class="gui-button gui-bg-primary gui-noborder" formType="submit"
								style="border-radius:50rpx;">
								<text class="gui-color-white gui-button-text">登 录</text>
							</button>
						</view>
					</form>
				</view>

				<!-- <view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin-top:80rpx;">
					<view class="gui-title-line"></view>
					<text class="gui-primary-color gui-h6"
						style="padding-left:50rpx; padding-right:50rpx;">其他方式登录</text>
					<view class="gui-title-line"></view>
				</view>
				<view class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-margin-top">
					<view class="other-login-icons" hover-class="gui-tap">
						<text class="other-login-icons gui-icons gui-color-gray">&#xe63e;</text>
					</view>
					<view class="other-login-icons" hover-class="gui-tap">
						<text class="other-login-icons gui-icons gui-color-gray">&#xe6cd;</text>
					</view>
				</view> -->
			</view>
		</template>
	</gui-page>
</template>
<script>
	import graceChecker from "@/Grace6/js/checker.js";
	import user from "@/api/user.js"
	export default {
		data() {
			return {
				mobile: "13807045285",
				password: "123456",
			}
		},
		onShow() {
			this.goToHome();
		},
		methods: {
			goToHome(){
				console.log("token",uni.getStorageSync('token'))
				if(uni.getStorageSync('token')){
					uni.switchTab({
						url: '/pages/switchPages/home'
					})
				}
			},
			// 选择协议
			radioChange: function(e) {
				console.log(e);
			},
			//打开协议
			openXYPage: function() {
				uni.showToast({
					title: "打开协议页面",
					icon: "none"
				});
				// 此处可以使用 uni api 打开协议页面
			},

			forgetPwd: function() {
				console.log('请自行完善代码');
			},
			loginbymsg: function() {
				console.log('请自行完善代码');
			},
			submit: function(e) {
				// 表单数据
				var formData = e.detail.value;
				// console.log(formData);
				// 利用 graceUI 的表单验证工具进行验证
				//定义表单规则
				var rule = [{
						name: "mobile",
						checkType: "string",
						checkRule: "5,50",
						errorMsg: "登录账户输入有误"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "6,100",
						errorMsg: "登录密码至少6个字符"
					},
				];
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					let data = {
						"username": this.mobile,
						"password": this.password
					};
					user.login(data).then(res => {
						uni.setStorageSync('token', res.token)
						console.log('res', res);
						if(res.code==500){
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
						}
						if(res.code==200){
							uni.showToast({
								title: "登录成功!",
								icon: "none"
							});
							// 根据项目需要完成数据验证工作
							uni.switchTab({
								url: '/pages/switchPages/home'
							})
						}
					})
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			}
		}
	}
</script>
<style scoped>
	.login-logo {
		width: 180rpx;
		height: 180rpx;
		font-size: 80rpx;
		text-align: center;
		line-height: 120rpx;
		padding: 30rpx;
		border-radius: 18rpx;
	}

	.other-login-icons {
		width: 88rpx;
		height: 88rpx;
		text-align: center;
		font-size: 70rpx;
		margin: 20rpx;
	}
</style>